<template>
	<view class="yb-flex" :id="customIdSync" :class="customClassSync" :style="customStyleSync">
		<view class="yb-input yb-flex yb-flex-1 yb-row yb-align-center"
		:style="{
			'border-width': borderSync.show ? Util.pixelunit(borderSync.width) : 0,
			'border-style': borderSync.style,
			'border-color': (focus && borderSync.focus && outline) ? borderSync.focus : borderSync.color,
			'border-radius': Util.pixelunit(optionsSync.radius),
			'padding-left': Util.pixelunit(optionsSync.paddingLeft),
			'padding-right': Util.pixelunit(optionsSync.paddingRight),
			'background-color': optionsSync.bgColor
		}">
			<slot name="left">
				<view class="left-icon yb-flex yb-row yb-align-center" v-for="(item, index) in iconSync.filter(icon => icon.float == 'left')" :key="index">
					<yb-icon :name="item.name" :size="item.size" :color="item.color"></yb-icon>
				</view>
			</slot>
			<input
			@focus="onFocus"
			@blur="onBlur"
			@change="onChange"
			@input="onInput"
			@confirm="onConfirm"
			:maxLength="maxLength"
			:disabled="disabled"
			:adjustPosition="adjustPosition"
			:confirmHold="confirmHold"
			:confirmType="confirmType"
			:type="password && type == 'password' ? 'password' : !password && type == 'password' ? 'text' : type"
			:placeholder="placeholder"
			:placeholder-style="optionsSync.placeholderStyle"
			:value="valueSync"
			:style="{
				flex: 1,
				color: optionsSync.color,
				'font-size': Util.pixelunit(optionsSync.size)
			}">
			<yb-tap @click="clearValue" v-if="clearSync.show && valueSync && valueSync.toString().length > 0">
				<slot name="clear">
					<yb-icon name="fork-circle-fill" :size="clearSync.size" :color="clearSync.color"></yb-icon>
				</slot>
			</yb-tap>
			<yb-tap @click="password = !password" v-if="type == 'password' && passwordSync.show">
				<slot name="clear">
					<yb-icon :name="password ? 'eye-off' : 'eye-on'" :size="passwordSync.size" :color="passwordSync.color"></yb-icon>
				</slot>
			</yb-tap>
			<slot name="right">
				<view class="right-icon yb-flex yb-row yb-align-center" v-for="(item, index) in iconSync.filter(icon => icon.float == 'right')" :key="index">
					<yb-icon :name="item.name" :size="item.size" :color="item.color"></yb-icon>
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			value: {
				type: [String,Number],
				default: ''
			},
			placeholder: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'text'
			},
			maxLength: {
				type: Number,
				default: -1
			},
			disabled: {
				type: Boolean,
				default: false
			},
			outline: {
				type: Boolean,
				default: false
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			},
			adjustPosition: {
				type: Boolean,
				default: true
			},
			confirmHold: {
				type: Boolean,
				default: false
			},
			confirmType: {
				type: String,
				default: 'done'
			}
		},
		data () {
			return {
				valueSync: '',
				focus: false,
				password: true
			}
		},
		computed: {
			Util () {
				return Util
			},
			optionsSync () {
				return Object.assign({}, {
					bgColor: '',
					color: '#333',
					size: '28rpx',
					radius: '10rpx',
					paddingLeft: '20rpx',
					paddingRight: '20rpx',
					placeholderStyle: 'color: #999;font-size:' + uni.upx2px(28) + 'px;',
					border: {},
					clear: {},
					password: {},
					icon: {}
				}, this.options)
			},
			iconSync () {
				if ( Util.typeof(this.optionsSync.icon) == 'Array' ) {
					return this.optionsSync.icon.map(icon => {
						return  Object.assign({}, {
							name: '',
							size: '40rpx',
							color: '#bbb',
							float: 'left',
							click: null
						}, icon)
					})
				} else {
					return [Object.assign({}, {
						name: '',
						size: '40rpx',
						color: '#bbb',
						float: 'left'
					}, Util.typeof(this.optionsSync.icon) == 'Object' ? this.optionsSync.icon : Util.typeof(this.optionsSync.icon) == 'String' ? { name: this.optionsSync.icon } : {})]
				}
			},
			borderSync () {
				return Object.assign({}, {
					width: '1px',
					style: 'solid',
					color: '#ccc',
					focus: '#007AFF',
					show: true
				}, Util.typeof(this.optionsSync.border) == 'Object' ? this.optionsSync.border : Util.typeof(this.optionsSync.border) == 'Boolean' ? { show: this.optionsSync.border } : {})
			},
			clearSync () {
				return Object.assign({}, {
					color: '#bbb',
					size: '40rpx',
					show: true
				}, Util.typeof(this.optionsSync.clear) == 'Object' ? this.optionsSync.clear : Util.typeof(this.optionsSync.clear) == 'Boolean' ? { show: this.optionsSync.clear } : {})
			},
			passwordSync () {
				return Object.assign({}, {
					color: '#bbb',
					size: '40rpx',
					show: true
				}, Util.typeof(this.optionsSync.clear) == 'Object' ? this.optionsSync.clear : Util.typeof(this.optionsSync.clear) == 'Boolean' ? { show: this.optionsSync.clear } : {})
			}
		},
		mounted() {
			this.valueSync = this.value
		},
		watch: {
			value (newVal) {
				if ( newVal != this.valueSync ) {
					this.valueSync = newVal
				}
			}
		},
		methods: {
			onFocus (e) {
				this.focus = true
				this.$emit('focus', e)
			},
			onBlur (e) {
				this.focus = false
				this.$emit('blur', e)
			},
			onConfirm (e) {
				this.$emit('confirm', e)
			},
			onChange (e) {
				this.$emit('change', e)
			},
			onInput (e) {
				this.valueSync = e.detail.value
				this.$emit('input', e.detail.value)
			},
			clearValue () {
				this.valueSync = ''
				this.$emit('input', this.valueSync)
				this.$emit('change', this.valueSync)
			}
		}
	}
</script>

<style scoped>
	.yb-input {
		position: relative;
	}
	.yb-input .left-icon {
		margin-right: 10rpx;
	}
	.yb-input .right-icon {
		margin-left: 10rpx;
	}
	.yb-input .tips {
		position: absolute;
		bottom: 0;
	}
</style>